<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <div data-role="page" id="Home">
            <div data-role="header">
                    <h1>Welcome To RSVP </h1>
                <div data-role="navbar">
                    <ul>
                        <li><a href="#" data-icon="back">Back</a></li>
                        <li><a href="#Home" data-icon="home">Home</a></li>
                        <li><a href="#sendMessage">Send Message</a></li>
                        <li><a href="#reports" >Reports</a></li>
                    </ul>
                </div>
            </div>

            <div data-role="content">

                <ul data-role="listview" data-inset="true">

                    <li data-role="list-divider">Navigation</li>
                    <li><a href="#sendMessage">Send Message</a></li>
                    <li><a href="#reports" >Reports</a></li>
                </ul>

            </div>

            <div data-role="footer">
                <h4>&copy; SMS Inator</h4>
            </div>
        </div>
        <div data-role="page" id="sendMessage">
            <div data-role="header">
                    <h1>Welcome To RSVP </h1>
                <div data-role="navbar">
                    <ul>
                        <li><a href="#" data-icon="back">Back</a></li>
                        <li><a href="#Home" data-icon="home">Home</a></li>
                        <li><a href="#sendMessage" class="ui-btn-active" >Send Message</a></li>
                        <li><a href="#reports" >Reports</a></li>
                    </ul>
                </div>
            </div>

            <div data-role="content">
                <div data-role="fieldcontain">
                    <label for="textarea">Message:</label>
                    <textarea name="textarea" id="textarea" style="height:200px; width:300px"></textarea>
                    <div data-role="fieldcontain">
                        <fieldset data-role="controlgroup">
                            <legend>Groups:</legend>
                            <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
                            <label for="checkbox-1">Team A</label>

                            <input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
                            <label for="checkbox-2">Team B</label>

                            <input type="checkbox" name="checkbox-3" id="checkbox-3" class="custom" />
                            <label for="checkbox-3">Team C</label>

                            <input type="checkbox" name="checkbox-4" id="checkbox-4" class="custom" />
                            <label for="checkbox-4">Replies Not Received</label>
                        </fieldset>
                    </div>

                    <a href="#reports" data-role="button">Send</a>

                </div>
            </div>

            <div data-role="footer">
                <h4>&copy; SMS Inator</h4>
            </div> 
        </div> 




        <div data-role="page" id="reports">
            <div data-role="header">
                    <h1>Welcome To RSVP </h1>
                <div data-role="navbar">
                    <ul>
                        <li><a href="#" data-icon="back">Back</a></li>
                        <li><a href="#Home" data-icon="home">Home</a></li>
                        <li><a href="#sendMessage">Send Message</a></li>
                        <li><a href="#reports" >Reports</a></li>
                    </ul>
                </div>
            </div>
            <div data-role="content">
                <ul data-role="listview" data-inset="true">

                    <li data-role="list-divider">Reports</li>
                    <li><a href="deliveryReport.html">Delivery Report</a></li>
                    <li><a href="whoNotReplied.html" >Who has Not Replied</a></li>
                    <li><a href="whoReplied.html">Who has Not Replied</a></li>
                </ul>
            </div>
            <div data-role="footer">
                <h4>&copy; SMS Inator</h4>
            </div>

        </div>




    </body>
</html>
